<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               v-model="form"
               ref="crud"
               @tree-load="treeLoad"
               :before-open="beforeOpen"
               :search.sync="searchFrom">

      <template slot="target" slot-scope="scope">
        <el-tag>{{scope.row.targetStr}}</el-tag>
      </template>

      <template slot="icon" slot-scope="scope">
        <i :class="scope.row.icon"></i>
      </template>

      <template slot="menuLeft" slot-scope="{}">
        <el-button type="danger" v-if="validatenull(permission.delCodeShow)?false:permission.delCodeShow" icon="el-icon-delete" size="small" @click.stop="deletes()">批量删除</el-button>
      </template>

      <template slot="menuRight" slot-scope="{size}">

        <avue-select v-model="clientId"
                     placeholder="请选择客户端"
                     :clearable="false"
                     style="margin-right: 10px;width: 50%!important;"
                     type="tree"
                     :props="{label: 'name',value: 'id'}"
                     :dic="clientList"
                     :size="size"></avue-select>

      </template>

      <template slot="menu"
                slot-scope="scope">
        <el-button type="text"
                          icon="el-icon-plus"
                          v-if="scope.row.isMenu === 1 && (validatenull(permission.addCodeShow)?false:permission.addCodeShow)"
                          @click="handleAdd(scope.row,scope.index)"
                          size="small">新增子项
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>

import {addItemById, delItemById} from "@/util/util";
import {validatenull} from "@/util/validate";

export default window.$crudCommon({
  data () {
    return {
      clientId: '',
      clientList: [],
      searchFrom: {},
      oldEditForm: {}
    }
  },
  created () {
    this.api['clientList']().then(res => {

      if (validatenull(res.data.data)){
        this.$message.error('请先新建客户端');
        return;
      }

      this.clientList = res.data.data;
      this.clientId = res.data.data[0].id;
    });

  },
  watch: {
    'clientId'(){
      this.getList();
    }
  },
  methods: {
    treeLoad(tree, treeNode, resolve){
      this.api[this.option.list || 'list']({parentId_eq: tree.id,clientId_eq: this.clientId}).then(res => {
        let list = res.data.data;
        list.forEach(ele => {
          ele.children = [];
        });
        resolve(list);
      });
    },
    listBefore(done){
      if (this.clientId){
        this.params.clientId_eq = this.clientId;
        done();
      }
    },
    addBefore(done){
      this.form.clientId = this.clientId;
      done();
    },
    handleAdd (row) {
      this.form.parentId = row.id;
      this.$refs.crud.rowAdd();
    },
    beforeOpen(done,type){

      if (["add"].includes(type)) {
        if(validatenull(this.clientId)){
          this.$message.error('请先新建客户端');
          return;
        }
      }

      if (["edit"].includes(type)) {
        this.oldEditForm = this.form;
      }
      done();
    },
    addAfter (row, done, data) {
      done(Object.assign(row, {
        id: data.data,
        children: []
      }));
      this.$message.success('新增成功');
      this.$refs.crud.updateDic('parentId');
    },
    updateAfter (row, done) {
      done(row);
      this.$message.success('修改成功');
      if (row.isMenu === 1){
        this.$refs.crud.updateDic('parentId');
      }

      //动态改变结构
      if (this.oldEditForm.parentId !== row.parentId){
        if (row.parentId === undefined){
          row.parentId = '-1';
        }
        const data = delItemById(this.$refs.crud.data,row.id);

        if (data){
          //avue更新后会丢失箭头，所以我这里不管改没改上级ID，都去修改下；
          const index = this.oldEditForm.parentId !== row.parentId ? 0 : data.index;
          addItemById(this.$refs.crud.data,Object.assign(data.data, row),index);
        }
      }

    },
    delAfter (row, done) {
      done(row);
      this.$message.success('删除成功');
      if (row.isMenu === 1){
        this.$refs.crud.updateDic('parentId');
      }
    }
  }
}, {
  onLoad: false,
  name: '/system/menuList',
  res: (data) => {
    return {
      data: data.data
    }
  },
  crudPage: false
})
</script>

<style lang="scss" scoped>

</style>
